<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>炫酷屏保</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

    </style>
</head>
<body>
    <canvas id="canvas">Canvas not supported</canvas>

    <script type="text/javascript">
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d");

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        var str = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";

        var fontSize = 10;
        var columns = canvas.width/fontSize;
        var drops = [];
        for(var i=0;i<columns;i++){
            drops[i] = 1;
        }
        function draw(){
            context.fillStyle = "rgba(0,0,0,.05)";
            context.fillRect(0,0,canvas.width,canvas.height);
            context.fillStyle = "#0f0";
            context.font=fontSize+"px arial";

            for(var i=0;i<drops.length;i++){
                var text = str[Math.floor(Math.random()*str.length)];
                context.fillText(text, i*fontSize, drops[i]*fontSize);
                if(drops[i]*fontSize>canvas.height && Math.random()> 0.975){
                    drops[i] = 0;
                }
                drops[i]++;
            }
        }

        setInterval(draw, 33);

    </script>
</body>
</html>